<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">步骤条</view>
		</w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2">
				<w-stepBar :stepList="stepList" :current="current"></w-stepBar>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="更改颜色/大小" color="#e43a1c">
			<view class="m-b-2">
				<w-stepBar :stepList="stepList2" fontSize="32" iconSize="60" :current="current" defaultColor="#ddd" activeColor="#00AAFF">
				</w-stepBar>
			</view>
		</pageDemoBlock>
		
		<view class="p-2">
			<w-button @click="nextClick(3)">下一步</w-button>
		</view>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				current: 0,
				stepList: [
					{
						icon: 'icon-icon_github-square',
						text: 'Github'
					},
					{
						icon: 'icon-icon_bilibili-square',
						text: 'B站'
					},
					{
						icon: 'icon-icon_TikTok-square',
						text: '抖音'
					},
					{
						icon: 'icon-icon_qq-square',
						text: 'QQ'
					}
				],
				stepList2: [
					{
						icon: 'icon-icon_wechat-square',
						text: '微信'
					},
					{
						icon: 'icon-icon_taobao-square',
						text: '淘宝'
					},
					{
						icon: 'icon-icon_weibo-square',
						text: '微博'
					},
					{
						icon: 'icon-icon_qq-square',
						text: 'QQ'
					}
				]
			};
		},
		methods: {
			nextClick(num) {
				if (this.current == num) {
					this.current = 0;
				} else {
					this.current++;
				}
			}
		}
	};
</script>

<style lang="scss" scoped></style>
